<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/slider.css" />
    <link rel="stylesheet" href="./css/jquery.slideBox.css" />
    <link rel="stylesheet" href="./css/productdetails.css" />

    <link rel="stylesheet" href="./css/magnifier.css">
</head>
<!--头部-->
<header id="header">
    <!--顶部-->
    <div class="dinb">
        <!--版心-->
        <div class="le-container">
            <!--头部-->
            <div>
                <span style="margin-left: 200px">legochina.cn</span>
                <span class="fr">欢迎光临<a href="./index.html" class="cf60">乐购</a>，请
                    <a href="./register.html" class="cf60">登陆</a>\<a href="./login.html" class="cf60">注册</a></span>
            </div>
            <!--大logo-->
            <div class="logo">
                <div class="im">
                    <img src="./image/1logo.jpg" alt="" />
                </div>
                <div>
                    <a href="#">全部商品分类</a>
                    <ul class="fenl">
                        <li><a href="./product.html">图书</a></li>
                        <li><a href="./product.html">电子书</a></li>
                        <li><a href="./product.html">原创文学</a></li>
                        <li><a href="./product.html">服装</a></li>
                        <li><a href="./product.html">运动户外</a></li>
                        <li><a href="./product.html">孕婴童</a></li>
                        <li><a href="./product.html">家具</a></li>
                        <li><a href="./product.html">创意文具</a></li>
                        <li><a href="./product.html">地方特产</a></li>
                        <li><a href="./product.html">海外购</a></li>
                        <li><a href="./product.html">电脑城</a></li>
                    </ul>
                </div>
            </div>
            <!--搜索框-->
            <!--表单与购物车-->
            <div class="serachbox le-container cf">
                <div class="order fr"><a href="./shoppingcart.html">我的订单</a></div>
                <div class="cart fr"><a href="./shoppingcart.html" style="color: #fff;">购物车</a><em class="fr">3</em>
                </div>
                <form action="" class="fr">
                    <input type="text" class="txt fl" placeholder="创意文具" />
                    <input type="submit" value="" class="btn fl" />
                </form>
            </div>
            <div class="navigation le-container">
                <ul>
                    <li><a href="./product.html">图书</a></li>
                    <li><a href="./product.html">电子书</a></li>
                    <li><a href="./product.html">原创文学</a></li>
                    <li><a href="./product.html">服装</a></li>
                    <li><a href="./product.html">运动户外</a></li>
                    <li><a href="./product.html">孕婴童</a></li>
                    <li><a href="./product.html">家具</a></li>
                    <li><a href="./product.html">创意文具</a></li>
                    <li><a href="./product.html">地方特产</a></li>
                    <li><a href="./product.html">海外购</a></li>
                    <li><a href="./product.html">电脑城</a></li>
                </ul>
            </div>
        </div>
</header>
<!--产品-->
<section id="product" class="le-container spacing">
    <!--序列-->
    <div class="xl">
        <p><span style="font-size: 20px;">图书</span> > <a href="#">小说</a> ><a href="#"> 情感/家庭/婚姻</a> > <a
                href="#">博集天卷</a> > <a href="#">她和他</a></p>
    </div>
    <!--放大镜-->
    <div class="magnifier" id="magnifier1">
        <div class="magnifier-container">
            <div class="images-cover"></div>
            <!--当前图片显示容器-->
            <div class="move-view"></div>
            <!--跟随鼠标移动的盒子-->
        </div>
        <div class="magnifier-assembly">
            <div class="magnifier-btn">
                <span class="magnifier-btn-left">&lt;</span>
                <span class="magnifier-btn-right">&gt;</span>
            </div>
            <!--按钮组-->
            <div class="magnifier-line">
                <ul class="clearfix animation03">
                    <li>
                        <div class="small-img">
                            <img src="./image/dashu.jpg" />
                        </div>
                    </li>
                    <li>
                        <div class="small-img">
                            <img src="./image/lsp (18).jpg" />
                        </div>
                    </li>
                    <li>
                        <div class="small-img">
                            <img src="./image/lsp (28).jpg" />
                        </div>
                    </li>
                    <li>
                        <div class="small-img">
                            <img src="./image/lsp (29).jpg ">
                        </div>
                    </li>
                    <li>
                        <div class="small-img">
                            <img src="./image/lsp (30).jpg" />
                        </div>
                    </li>
                </ul>
            </div>
            <!--缩略图-->
        </div>
        <div class="magnifier-view"></div>
        <!--经过放大的图片显示容器-->
    </div>
    <!--右边内容-->
    <div class="yb">
        <p style="font-size: 20px;">她和他</p>
        <p class="cred">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
        <p class="ccc">[法] 马克·李维 著；杨亦雨 译</p>
        <div class="price">
            <p>乐 购 价：<span class="cred" style="font-size: 24px;">￥26.20 </span>[6.9折] [定价：￥38.00] (降价通知)</p>
            <p style="margin-bottom: 20px;">促销信息：<span class="cred" style="font-size: 16px;">满减
                    每满150.00元，可减50.00元现金</span> 详情 >></p>
            <span>领 券：</span>
            <span class="quan">
                <img src="./image/quan_03.jpg" alt="">
                <img src="./image/quan_03.jpg" alt="">
            </span>
            <span class="ys">
                累计评价
                <span class="cf60">99999</span>
            </span>
        </div>
        <p style="margin-top: 30px;">种类选择：<span class="zz">平装版<span class="yy">√</span></span><span class="zz">精装版<span
                    class="yy">√</span></span></p>
        <div style="margin-top: 50px;position: relative;">
            <div class="jjk">
                <input type="text" value="1">
                <span class="sj">+</span>
                <span class="xj">-</span>
            </div>
            <div class="ann"><a href="./shoppingcart.html" style="color: white;">加入购物车</a></div>
            <p class="ccc" style="margin-top: 54px;">温馨提示：支持7天无理由退货</p>
        </div>
    </div>
    <span class="fl ccc" style="margin-left: 100px;">商品编号：11950959</span>
</section>
<!--人气单品-->
<section id="guess" class="le-container">
    <p style="border-bottom: 6px solid #f60;"><span class="tup">人气单品</span></p>
    <ul>
        <li>
            <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
            <img src="./image/shuzhe_03.jpg" alt="">
            <p>白夜行 东野上吾</p>
            <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
            <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                    style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>
        </li>
        <li>
            <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
            <img src="./image/shuzhe_03.jpg" alt="">
            <p>白夜行 东野上吾</p>
            <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
            <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                    style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>
        </li>
        <li>
            <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
            <img src="./image/shuzhe_03.jpg" alt="">
            <p>白夜行 东野上吾</p>
            <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
            <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                    style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>
        </li>
        <li>
            <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
            <img src="./image/shuzhe_03.jpg" alt="">
            <p>白夜行 东野上吾</p>
            <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
            <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                    style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>
        </li>
        <li>
            <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
            <img src="./image/shuzhe_03.jpg" alt="">
            <p>白夜行 东野上吾</p>
            <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
            <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                    style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>
        </li>
    </ul>
</section>
<!--看了又看-->
<section id="look" class="le-container">
    <div class="zbn">
        <div class="sk">看了又看</div>
        <ul>
            <li>

                <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
                <img src="./image/shuzhe_03.jpg" alt="">
                <p>白夜行 东野上吾</p>
                <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
                <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                        style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>

            </li>
            <li>
                <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
                <img src="./image/shuzhe_03.jpg" alt="">
                <p>白夜行 东野上吾</p>
                <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
                <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                        style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>

            </li>
            <li>
                <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
                <img src="./image/shuzhe_03.jpg" alt="">
                <p>白夜行 东野上吾</p>
                <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
                <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                        style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>

            </li>
            <li>
                <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
                <img src="./image/shuzhe_03.jpg" alt="">
                <p>白夜行 东野上吾</p>
                <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
                <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                        style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>

            </li>
            <li>
                <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
                <img src="./image/shuzhe_03.jpg" alt="">
                <p>白夜行 东野上吾</p>
                <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
                <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                        style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>

            </li>
            <li>
                <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
                <img src="./image/shuzhe_03.jpg" alt="">
                <p>白夜行 东野上吾</p>
                <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
                <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                        style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>

            </li>
            <li>
                <img src="./image/sj1.jpg" alt="" style="margin-left: 40px;">
                <img src="./image/shuzhe_03.jpg" alt="">
                <p>白夜行 东野上吾</p>
                <p><span class="cred">推荐</span>：⭐ ⭐ ⭐ ⭐ ⭐</p>
                <p><span class="cred" style="font-size: 20px;">￥：30</span><span class="ccc"
                        style="font-size: 20px;margin-left: 30px;text-decoration: line-through;">46</span> </p>

            </li>
        </ul>
    </div>
    <div class="ybn">
        <p class="tbu">
            <span class="js">商品介绍</span><span class="pl">评论（9999）</span>
        </p>
        <div>
            <div class="spjs">
                <img src="./image/datu_03.jpg" alt="">
            </div>
            <div class="sppl">
                <div class="tb cf">
                    <span class="bfl fl">
                        98%
                        <p style="color: #999999;font-size: 14px;margin-left: 56px;">好评度</p>
                    </span>
                    <span class="hpd fl">
                        <p>好评 (98%)<span class="p11"><img src="./image/pl_03.jpg" alt=""></span>
                        </p>
                        <p>中评 （2%）<span class="p1"><img src="./image/pl_06.jpg" alt=""></span>
                        </p>
                        <p>差评 （0%）<span class="p1"><img src="./image/pl_08.jpg" alt=""></span>
                        </p>
                    </span>
                    <span class="ypl fl">
                        <span style="margin-right: 40px;">1.洲**子</span> +0
                        <span style="margin-right: 40px;margin-left: 80px;">2.洲**子</span>+0
                        <span style="margin-right: 40px;">3.洲**子</span> +10
                        <span style="margin-right: 40px;margin-left: 70px;">4.洲**子</span>+10
                    </span>
                </div>
                <div class="qbpj">
                    <p class="pp"><span class="cred"
                            style="margin-left: 30px;">全部评价（9999）</span><span>好评（888）</span><span>中评（888）</span><span>差评（888）</span>
                    </p>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                    <div class="pinj">
                        <span class="xx fl">
                            ⭐⭐⭐⭐
                            <p>下单后5天评论</p>
                            <p>2016-08-11</p>
                        </span>
                        <span class="fl" style="color: #999999;">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关<br />
                            键是价格真给力</span>
                        <span class="fr" style="margin-right: 20px;">
                            <img src="./image/tubo_03.jpg" alt="">
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="./lib/jquery.min.js"></script>


<script src="./lib/jquery-1.11.3.min.js"></script>
<script src="./lib/magnifier(1).js"></script>
<script src="./js/productdetails.js"></script>

<body>

</body>

</html>